<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<script type="text/javascript" src="tgd/Services/RESTim/Message.js"></script>
		<script type="text/javascript" src="tgd/Services/RESTim/MessageList.js"></script>
		<title>Tim's Rest Library</title>
		<script type="text/javascript">
			//<![CDATA[

			var _msg;
			var _msgList;

			function init() {
				_msgList = new tgd.Services.RESTim.MessageList();

				_msgList.onRefresh = function() {
					var allMSGs = document.getElementById("allMSGs");
					allMSGs.innerHTML = "";

					for (var i = 0; i < _msgList._data.length; ++i) {
						var div = document.createElement("div");
						div.innerHTML = '<input type="button" class="button" value="Edit" onclick="if (_msg.Text = prompt(\'Update the message text.\', \'' + _msgList._data[i].Text + '\')) { _msg.id = ' + _msgList._data[i].id + '; _msg.update(); }" /><input type="button" class="button" value="Delete" onclick="_msg.id = ' + _msgList._data[i].id + '; _msg.remove();" /><a href="javascript:_msg.id = ' + _msgList._data[i].id + '; _msg.get();">' + _msgList._data[i].Text + '  [' + _msgList._data[i].id + ']</a>';
						allMSGs.appendChild(div);
					}

					_msgList.log("(re)loaded all messages");
				};

				_msg = new tgd.Services.RESTim.Message();

				_msg.onGet = function() {
					_msg.log("GET returned [" + _msg.Text + "]  [" + _msg.id + "]");
				};

				_msg.onDelete = function() {
					_msg.log("DELETE successful");
				};

				_msg.onPut = function() {
					_msg.log("PUT successful [" + _msg.Text + "]  [" + _msg.id + "]");
				};

				_msg.onPost = function() {
					document.getElementById("txtXHR").value = "";
					_msg.log("save returned successfully");
				};
			}

			//]]>
		</script>

		<style type="text/css">
			body,html{margin:0;height:100%;width:100%;background:#333;}

			#menu{border-bottom:solid 1px #ccc;background:#A4C639;color:#666;}
			#content div{background:#fff;font-family: Consolas, "Lucida Console" ,monospace;padding: 3px;margin: 10px;}
			#content div h1{margin: 0;padding: 3px;font-size: 1.3em;font-family: calibri;background: #A4C639;color: #fff;border: solid 1px #333;}

			input{background:#333;margin:0;padding:2px;border:solid 1px #ccc;color:#A4C639;font-weight:bold;font-family:consolas;line-height:1em;font-size:1em;}
			input.button{padding:1px}

			.date{color:#ccc;}
		</style>
	</head>
	<body id="body" onload="init();">
		<div id="menu">
			Tim is the best REST API designer in the world.
		</div>
		<div id="content">
			<div>
				<h1>
					<input id="txtXHR" type="text" maxlength="100" style="width:50%;"  onkeyup="if (event.keyCode == 13) { _msg.Text = this.value; _msg.save(); }" />
					<input type="button" class="button" value="New" onclick="_msg.Text = document.getElementById('txtXHR').value; _msg.save();" />
				</h1>
			</div>
			<div>
				<h1>
					All Messages
					<input type="button" class="button" value="(re)load" onclick="_msgList.refresh();" />
				</h1>
				<div id="allMSGs"></div>
			</div>
			<div>
				<h1>Log</h1>
				<div id="msgLog"></div>
			</div>
		</div>
	</body>
</html>
